<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>刘岩—小米注册</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				/*border: 1px solid ;*/
			}
			
			.all {
				height: 970px;
				width: 100%;
				background-color: #F9F9F9;
				position: absolute;
			}
			
			.main {
				margin: 140px auto;
				width: 850px;
				height: 600px;
				background-color: white;
			}
			
			.main .m-head {
				width: 786px;
				height: 88px;
				margin: 0 auto;
			}
			
			.main .m-head .logo {
				width: 49px;
				height: 48px;
				margin: 0 auto;
			}
			
			.main .title {
				width: 786px;
				height: 45px;
				margin: 0 auto;
			}
			
			.main .title p {
				text-align: center;
				line-height: 45px;
				font-size: 30px;
			}
			
			.main .body {
				width: 786px;
				height: 436px;
				margin: 0 auto;
			}
			
			.main .body .form {
				width: 332px;
				height: 436px;
				margin: 0 auto;
			}
			
			.main .body .form .form1 {
				margin: 30px auto;
				width: 332px;
				height: 376px;
			}
			
			.main .body .form .form1 .sel {
				width: 332px;
				height: 42px;
			}
			
			.main .body .form .form1 .sel1 select {
				width: 332px;
				height: 42px;
			}
			
			.main .body .form .form1 span {
				display: inline-block;
				width: 332px;
				height: 40px;
			}
			
			.main .body .form .form1 .sel2 {
				width: 332px;
				height: 78px;
			}
			
			.main .body .form .form1 .sel2 select {
				width: 74px;
				height: 42px;
			}
			
			.main .body .form .form1 .sel2 input {
				width: 254px;
				height: 38px;
			}
			
			.main .body .form .form1 .sel2 span {
				display: none;
				font-size: 12px;
				vertical-align: middle;
				height: 25px;
				line-height: 25px;
				/*border: 1px solid;*/
				position: relative;
				color: red;
			}
			
			.main .body .form .form1 .sel2 span img {
				/*border: 1px solid;*/
				position: relative;
				top: 5px;
			}
			
			.main .body .form .form1 .sel3 {
				height: 55px;
			}
			
			.main .body .form .form1 .sel3 .yzm input {
				display: inline-block;
				width: 200px;
				height: 40px;
			}
			
			.main .body .form .form1 .sel3 .yzm span {
				display: none;
				color: red;
				font-size: 12px;
			}
			
			.main .body .form .form1 .sel3 .yzm img {
				float: right;
				width: 120px;
				height: 40px;
				cursor: pointer;
			}
			
			.main .body .form .form1 .sel1 select {
				/*border: 1px solid;*/
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				background-image: url(img/button1.png);
				background-position: right;
				background-repeat: no-repeat;
				outline: none;
			}
			
			.main .body .form .form1 .sel2 select {
				/*border: 1px solid;*/
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				background-image: url(img/button2.png);
				background-position: right;
				background-repeat: no-repeat;
				outline: none;
			}
			
			.main .body .form .form1 .sel2 input {
				outline: none;
			}
			
			.main .body .form .form1 .sel3 input {
				outline: none;
			}
			
			.main .body .form .form1 .sel4 {
				width: 330px;
				height: 56px;
			}
			
			.main .body .form .form1 .sel4 input {
				background-color: #FF6700;
				width: 330px;
				height: 40px;
				margin-top: 16px;
				font-size: 14px;
				color: white;
				outline: none;
				border: 0;
				cursor: pointer;
			}
			.main .body .form .form1 .sel4 input:hover{
				background-color: #FF936A;
			}
			
			.main .body .form .form1 .sel5 {
				width: 332px;
				height: 40px;
				font-size: 14px;
			}
			
			.main .body .form .form1 .sel5 a {
				color: #333;
				font-weight: bold;
				text-decoration: none;
			}
			
			.foot {
				width: 1130px;
				height: 50px;
				margin: 10px auto;
			}
			
			.foot .foot1 {
				width: 266px;
				height: 40px;
				margin: 0 auto;
			}
			
			.foot .foot2 {
				width: 1130px;
				height: 40px;
				margin: 0 auto;
			}
			
			.foot .foot1 li {
				float: left;
				list-style-type: none;
				text-align: center;
			}
			
			.foot .foot1 li a {
				text-decoration: none;
				color: #757575;
				font-size: 14px;
			}
			
			.foot .foot1 li span {
				padding: 0 15px;
				font-size: 12px;
			}
			
			.foot .foot2 p {
				color: #757575;
				font-size: 14px;
				text-align: center;
			}
			#cgzc{
				font-size: 14px;
				color: #666;
			}
			
		</style>
	</head>

	<body>
		<div class="all">
			<div class="main">
				<div class="m-head">
					<div class="logo">
						<img src="img/milogo.png" />
					</div>
				</div>
				<div class="title">
					<p>注册小米账号</p>
				</div>
				<div class="body">
					<div class="form">
						<div class="form1">
							<form action="" id="form1">
								<p>国家/地区</p>
								<div class="sel1">
									<select id="sel1" name="" size="1" onchange="selectguo(this)">
										<option value="">中国</option>
										<!--<option value="">中国台湾</option>
										<option value="">中国香港</option>
										<option value="">Brazil</option>-->
									</select>
								</div>
								<span id="cgzc">成功注册帐号后，国家/地区将不能被修改</span>
								<p>手机号码</p>
								<div class="sel2">
									<select id="sel2" name="" size="1">
										<option value="" selected="selected">+86</option>
										<!--<option value="">中国台湾</option>
										<option value="">中国香港</option>
										<option value="">中国</option>-->
									</select><input type="text" name="" id="shouji" value="" />
									<span><img src="warn.png"/>请输入手机号码</span>
								</div>
								<p>图形验证码</p>
								<div class="sel3">
									<div class="yzm">
										<input type="text" name="" id="yzm" value="" />
										<img src="img/yzm.png" />
										<span>请输入图片验证码</span>
									</div>
								</div>
								<div class="sel4">
									<input type="button" name="" id="" value="立即注册" onclick="tj(this)" />
								</div>
								<div class="sel5">
									<p>注册帐号即表示您同意并愿意遵守小米
										<a href="">用户协议</a>和
										<a href="">隐私政策</a>
									</p>
								</div>
							</form>
						</div>
					</div>
				</div>

			</div>
			<div class="foot">
				<div class="foot1">
					<ul>
						<li>
							<a href="">简体</a><span>|</span></li>
						<li>
							<a href="">繁体</a><span>|</span></li>
						<li>
							<a href="">English</a><span>|</span></li>
						<li>
							<a href="">常见问题</a>
						</li>
					</ul>
				</div>
				<div class="foot2">
					<p>小米公司版权所有-京ICP备10046444-<img src="img/ghs.png" />京公网安备11010802020134号-京ICP证110507号</p>
				</div>
			</div>
		</div>

		<script>
			var guoarr = ["中国台湾", "中国香港", "Brazil"];
			var phonearr = new Array();
			phonearr["中国台湾"] = ["+886"];
			phonearr["中国香港"] = ["+852"];
			phonearr["Brazil"] = ["+55"];

			window.onload = function() {
				var guo = document.getElementById("sel1");
				//				sel2.options.length=1;
				for(var i = 0; i < guoarr.length; i++) {
					var op = new Option(guoarr[i], guoarr[i]);
					guo.add(op);
				}
			}

			function selectguo(t) {
				var arr = phonearr[t.value];
				var sel2 = document.getElementById("sel2");
				sel2.options.length = 0;
				for(var i = 0; i < arr.length; i++) {
					var op = new Option(arr[i], arr[i]);
					sel2.add(op);
				}
			}
			
				var phone=document.getElementById("shouji");
				var phone1= /^1[34578][0-9]{9}$/;
				var yzm=document.getElementById("yzm");
				var yzm1=/^\w{5}$/;
			document.getElementById("shouji").onblur=function(){
				if(!(phone1.test(phone.value))){
					phone.parentNode.children[2].style.display="inline-block";
				}else{
					phone.parentNode.children[2].style.display="none";
				}
			}
			
			document.getElementById("yzm").onblur=function(){
				if(!(yzm1.test(yzm.value))){
					yzm.parentNode.children[2].style.display="inline-block";
				}else{
					yzm.parentNode.children[2].style.display="none";
				}
			}
			
			function tj(q){
				
				
				if(!(phone1.test(phone.value))){
					phone.parentNode.children[2].style.display="inline-block";
				}else if(!(yzm1.test(yzm.value))){
					yzm.parentNode.children[2].style.display="inline-block";
				}else{
					document.getElementById("form1").submit();
				}
			}
			
		</script>

	</body>

</html>